<template>
  <div>
    <van-nav-bar :title="classname" left-text="返回" left-arrow @click-left="onClickLeft" />
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <!-- <van-cell v-for="item in singerList" :key="item.singerid" :title="item.singername" /> -->
      <ul class="yM-sl">
        <router-link
          tag="li"
          :to="{path:'/singerDetail' , query:{singerid:item.singerid}}"
          class="yM-sl-item"
          v-for="item in singerList"
          :key="item.singerid"
        >
          <div class="img">
            <img :src="item.imgurl | setWH(480) " alt />
          </div>
          <div class="content">
            <p>{{ item.singername }}</p>
          </div>
        </router-link>
      </ul>
    </van-list>
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
</template>
<script>
export default {
  data() {
    return {
      singerList: [],
      loading: false,
      finished: false,
      classname: ''
    }
  },
  created: function() {
    this.classname = this.$route.query.classname
  },
  methods: {
    onClickLeft: function() {
      this.$router.go(-1)
    },
    onLoad: async function() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      const { data: res } = await this.axios.get(
        'api/singer_list/' + this.$route.query.classid
      )
      if (res.code === 200) {
        this.singerList = res.data.singers.list.info
        this.loading = false

        // 数据全部加载完成
        if (this.singerList.length >= res.data.singers.pagesize) {
          this.finished = true
        }
      }

      /*   setTimeout(() => {
          for (let i = 0; i < 10; i++) {
            this.list.push(this.list.length + 1)
          }

          // 加载状态结束
          this.loading = false

          // 数据全部加载完成
          if (this.list.length >= 40) {
            this.finished = true
          }
        }, 1000) */
    }
  }
}
</script>
<style scoped lang="less">
.yM-sl {
  padding: 0 20px;
  .yM-sl-item {
    width: 100%;
    padding: 32px 0;
    display: flex;
    border-bottom: 1px solid #eee;
    .img {
      width: 150px;
      height: 150px;
      img {
        width: 100%;
        height: 100%;
        vertical-align: top;
      }
    }
    .content {
      line-height: 150px;
      padding-left: 50px;
      color: #000;
    }
  }
}
</style>